'use client';

import { useEffect, useState } from 'react';
import { CheckCircle, Loader2, Zap } from 'lucide-react';
import GlassCard from './GlassCard';

interface VectorizeProgressProps {
  isOpen: boolean;
  onClose: () => void;
  documentTitle: string;
  progress: number;
  status: 'processing' | 'success' | 'error';
  message?: string;
}

export default function VectorizeProgress({
  isOpen,
  onClose,
  documentTitle,
  progress,
  status,
  message
}: VectorizeProgressProps) {
  const [displayProgress, setDisplayProgress] = useState(0);

  useEffect(() => {
    if (progress > displayProgress) {
      const timer = setTimeout(() => {
        setDisplayProgress(Math.min(displayProgress + 5, progress));
      }, 50);
      return () => clearTimeout(timer);
    }
  }, [progress, displayProgress]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <GlassCard className="w-full max-w-md p-6">
        <div className="text-center">
          {/* 图标 */}
          <div className="mb-4 flex justify-center">
            {status === 'processing' && (
              <div className="relative">
                <Zap className="h-16 w-16 text-blue-500 animate-pulse" />
                <Loader2 className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-8 w-8 text-indigo-500 animate-spin" />
              </div>
            )}
            {status === 'success' && (
              <CheckCircle className="h-16 w-16 text-green-500" />
            )}
            {status === 'error' && (
              <div className="h-16 w-16 bg-red-500 rounded-full flex items-center justify-center">
                <span className="text-white text-2xl">✗</span>
              </div>
            )}
          </div>

          {/* 标题 */}
          <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
            {status === 'processing' && '正在向量化文档'}
            {status === 'success' && '向量化成功！'}
            {status === 'error' && '向量化失败'}
          </h3>

          {/* 文档名 */}
          <p className="text-sm text-gray-600 dark:text-white/70 mb-4 line-clamp-2">
            {documentTitle}
          </p>

          {/* 进度条 */}
          {status === 'processing' && (
            <div className="mb-4">
              <div className="relative h-3 bg-gray-200 dark:bg-white/10 rounded-full overflow-hidden">
                <div
                  className="absolute top-0 left-0 h-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 transition-all duration-300 ease-out"
                  style={{ width: `${displayProgress}%` }}
                >
                  <div className="absolute inset-0 bg-white/20 animate-pulse"></div>
                </div>
              </div>
              <p className="text-sm text-gray-500 dark:text-white/50 mt-2">
                {displayProgress}%
              </p>
            </div>
          )}

          {/* 状态消息 */}
          {message && (
            <p className="text-sm text-gray-600 dark:text-white/70 mb-4">
              {message}
            </p>
          )}

          {/* 关闭按钮 */}
          {status !== 'processing' && (
            <button
              onClick={onClose}
              className="px-6 py-2 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 text-white rounded-lg transition-all shadow-lg hover:shadow-xl"
            >
              确定
            </button>
          )}
        </div>
      </GlassCard>
    </div>
  );
}

